<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>明细</title>

    <!-- CSS -->
    <link rel="stylesheet" href="../../static/plugins/layui/css/layui.css" th:href="@{plugins/layui/css/layui.css}"/>
    <link rel="stylesheet" href="../../static/mycss/common.css" th:href="@{mycss/main.css}"/>

</head>
<body>
<input type="hidden" name="uuid" id="uuid"/>
<div>
    <div style="margin:10px;">
        <form class="layui-form" id="formId">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">d1</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" name="d1" disabled="disabled"/>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">d2</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" name="d2" disabled="disabled"/>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">d3</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" name="d3" disabled="disabled"/>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">d4</label>
                    <div class="layui-input-inline">
                        <select name="d4" disabled="disabled">
                            <option value="">---请选择---</option>
                            <option value="0">分类1</option>
                            <option value="1">分类2</option>
                            <option value="2">分类3</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">d5</label>
                    <div class="layui-input-inline">
                        <select name="d5" disabled="disabled">
                            <option value="">---请选择---</option>
                            <option value="0">来源1</option>
                            <option value="1">来源2</option>
                            <option value="2">来源3</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">d6</label>
                    <div class="layui-input-inline">
                        <select name="d6" disabled="disabled">
                            <option value="">---请选择---</option>
                            <option value="0">来源1</option>
                            <option value="1">来源2</option>
                            <option value="2">来源3</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">d7</label>
                <div class="layui-input-block">
                    <input type="radio" name="d7" value="1" title="男" disabled="disabled">
                    <input type="radio" name="d7" value="0" title="女" disabled="disabled">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">dX</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="d8" title="d8" disabled="disabled">
                    <input type="checkbox" name="d9" title="d9" disabled="disabled">
                    <input type="checkbox" name="d10" title="d10" disabled="disabled">
                </div>
            </div>
            <div class="layui-form-item ">
                <label class="layui-form-label">d11</label>
                <div class="layui-input-block">
                    <textarea class="layui-textarea" name="d11" disabled="disabled"></textarea>
                </div>
            </div>
            <div class="layui-form-item ">
                <label class="layui-form-label">d12</label>
                <div class="layui-input-block">
                    <textarea class="layui-textarea" name="d12" disabled="disabled"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">附件上传：</label>
                <div class="layui-input-block">
                    <div class="file_upload" style="width: 80px;height: 80px;background-color: #93D1FF">
                        <i class="layui-icon" style="font-size: 80px; color: #1E9FFF;">&#xe654;</i>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- JS -->
<script type="text/javascript" src="../../static/plugins/layui/layui.js" th:src="@{plugins/layui/layui.js}"></script>
<script>
    layui.use(['form', 'laydate', 'layer', 'upload'], function () {
        var $ = layui.$;
        var form = layui.form;
        var laydate = layui.laydate;
        var layer = layui.layer;

        //弹出附件上传框
        $('.file_upload').click(function(){
            layer.open({
                type: 2,
                title: '附件列表',
                content: '../mydemo/fileupload.html',
                area: ['800px', '80%'],
                resize:false,//是否允许拉伸
                maxmin: false, //开启最大化最小化按钮
                shadeClose: false,
                shade : 0.6
            });
        });

        /**
         * 根据 uuid 去后台 取数据，并填充表单
         */
        $.ajax({
            url:'demo/getDetail',
            type: 'post',
            data:{uuid:$('#uuid').val()},
            dataType:'json',//服务器返回的数据类型。
            success: function(data) {
                //填充表单
                $('#formId').populateForm(data);
                //渲染表单
                form.render();
            },
            error:function(response){
                layer.msg("返回值出错",{icon:5,time:1000});
            }
        });

        $.fn.populateForm = function(data){
            return this.each(function(){
                var formElem, name;
                if(data == null){this.reset(); return; }
                for(var i = 0; i < this.length; i++){
                    formElem = this.elements[i];
                    //checkbox的name可能是name[]数组形式
                    name = (formElem.type == "checkbox")? formElem.name.replace(/(.+)\[\]$/, "$1") : formElem.name;
                    if(data[name] == undefined) continue;
                    switch(formElem.type){
                        case "checkbox":
                            if(data[name] == ""){
                                formElem.checked = false;
                            }else{
                                //数组查找元素
                                if(data[name].indexOf(formElem.value) > -1){
                                    formElem.checked = true;
                                }else{
                                    formElem.checked = false;
                                }
                            }
                            break;
                        case "radio":
                            if(data[name] == ""){
                                formElem.checked = false;
                            }else if(formElem.value == data[name]){
                                formElem.checked = true;
                            }
                            break;
                        case "button": break;
                        default: formElem.value = data[name];
                    }
                }
            });
        };

    });
</script>

</body>
</html>